<template>
  <!--header-->
  <div class="navbar">
    <!--    折叠按钮-->
    <div class="navbar_bread">
      <el-icon @click="clickIcon" class="navbar_bread_icon">
        <Operation/>
      </el-icon>
    </div>
    <!--品牌名称-->
    <div class="brand">
      <!--摩尔烯管理后台-->
    </div>
    <!--用户名/退出登录-->
    <div class="navbar_user">
      <el-icon>
        <UserFilled/>
      </el-icon>
      <span>{{ storeUser.userInfo.nickName}}</span>
      <el-icon style="margin-left: 20px">
        <SwitchButton/>
      </el-icon>
      <span @click="handleLogin">退出登录</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { indexStore } from '@/store/modules/index'
import { userStore } from '@/store/modules/user'
import FSMessage from '@/utils/message'
import { useRouter } from 'vue-router'

const router = useRouter()

const store = indexStore()
const storeUser = userStore()

const clickIcon = () => {
  store.toggle = !store.toggle
}

/** 描述： 退出登录 */
const handleLogin = async () => {
  try {
    await FSMessage.confirm('是否确定退出', '退出提示')
    await storeUser.logout()
    await router.push('/404')
  } catch (e) {
    console.log(e)
  }
}
</script>

<style scoped lang="less">
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.navbar_bread_icon {
  cursor: pointer;
  font-size: 20px;
}

@keyframes hue {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(-1turn);
  }
}

.brand {
  background-image: linear-gradient(90deg, #f66, #f90);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
  color: transparent;
  animation: hue 5s linear infinite;
}

.navbar_user {
  display: flex;
  align-items: center;
  color: #5a5e66;

  &:hover {
    cursor: pointer;
  }
}
</style>
